@import '../../styles/util'

@mixin fui-avatar-size($size, $icon-size)
  width: $size
  height: $size
  line-height: $size
  border-radius: $size / 2

  & > *
    line-height: $size

  .fui-avatar-icon
    width: $icon-size
    height: $icon-size

\:host
  display: inline-block
  text-align: center
  background: $bg-main
  color: $text-reverse
  white-space: nowrap
  position: relative
  overflow: hidden

  &[hidden]
    display: none

  &.fui-avatar-sm
    @include fui-avatar-size(1.5rem, 0.75rem)

  &.fui-avatar-md
    @include fui-avatar-size(2.5rem, 1.5rem)

  &.fui-avatar-lg
    @include fui-avatar-size(3.5rem, 2.5rem)

  .fui-avatar-container
    @include flex-xy-center
    width: 100%
    height: 100%

    & > img
      width: 100%
      height: 100%

    .fui-avatar-icon
      fill: $icon-reverse
